<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import AdminLayout from '@/layouts/AdminLayout.vue'
import AuthLayout from '@/layouts/AuthLayout.vue'

const route = useRoute()

// 根据路由元信息决定使用哪个布局
const currentLayout = computed(() => {
  const layout = route.meta.layout
  if (layout === 'auth') {
    return AuthLayout
  }
  return AdminLayout
})

// 判断是否使用认证布局
const isAuthLayout = computed(() => route.meta.layout === 'auth')
</script>

<template>
  <!-- 认证布局 -->
  <AuthLayout v-if="isAuthLayout">
    <router-view />
  </AuthLayout>

  <!-- 管理后台布局 -->
  <AdminLayout v-else>
    <router-view />
  </AdminLayout>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #2c3e50;
}

#app {
  height: 100vh;
}
</style>
